<template>
  <div>
    <div class="addProtocol">
      <el-dialog
        title="查询"
        :visible.sync="searchDialogShow"
        class="box"
        :before-close="handleClose"
      >
        <div>
          <el-row>
            <el-col :span="3.5" style="display: inline-block; width: 70px;text-align: left ">
              <div class="grid-content bg-purple">
                级别：
              </div>
            </el-col>
            <el-col :span="9">
              <div class="grid-content bg-purple">
                <el-select clearable class="LongSelectInput" v-model="searchForm.level" placeholder="请选择">
                  <el-option
                    v-for="item in levelOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3.5" style="display: inline-block; width: 70px; text-align: left">
              <div class="grid-content bg-purple">
                开始时间：
              </div>
            </el-col>
            <el-col :span="9">
              <div class="grid-content bg-purple">
                <el-date-picker
                  v-model="searchForm.starttime"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm:ss"
                  @change="changeTest"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="startTime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="3.5" style="display: inline-block; width: 70px; text-align: left">
              <div class="grid-content bg-purple">
                结束时间：
              </div>
            </el-col>
            <el-col :span="9">
              <div class="grid-content bg-purple">
                <el-date-picker
                  v-model="searchForm.endtime"
                  type="datetime"
                  @change="changeTest"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="endTime"
                  placeholder="选择日期时间">
                </el-date-picker>
              </div>
            </el-col>
          </el-row>
        </div>
        <div slot="footer" class="dialog-footer clearFix">
          <!--<div class="footerLeft" v-if="this.intValue === '高级查询'">-->
          <!--<input class="unnormalInput" placeholder="查询标签名称，最多10个字"/>-->
          <!--<button>创建快捷查询标签</button>-->
          <!--<span>创建标签后，您可以快速进行列表信息筛选！</span>-->
          <!--</div>-->
          <div class="footerRightBtn">
            <el-tooltip :disabled="!timeBtn" class="item" effect="dark" content="请 选 择 要 查 询 的 时 间 段" placement="top">
              <span>
                <el-button :disabled="timeBtn" type="primary" @click="confirmSearch()">确 定</el-button>
              </span>
            </el-tooltip>
            <el-button type="info" @click="handleClose()">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import BUS from './messageBus'
  export default {
    data() {
      return {
        // 普通查询数据
        searchForm: {
          equip_cid: '',
          starttime: '',
          endtime: ''
        },
        timeBtn: true,
        // 验证时间逻辑
        startTime: {
          disabledDate: time => {
            if (this.endtime) {
              return (
                time.getTime() > new Date(this.endtime).getTime()
              )
            } else {
              return time.getTime() > Date.now()
            }
          }
        },
        endTime: {
          disabledDate: time => {
            if (this.searchForm.starttime) {
              return (
                time.getTime() > Date.now() ||
                time.getTime() < new Date(this.searchForm.starttime).getTime()
              )
            } else {
              return time.getTime() > Date.now()
            }
          }
        },
        // 下拉选择
        levelOptions: [],
        dialogBack: false,
        // 以下为接口
        // 获取级别
        levelselectTable: {
          access_token: localStorage.getItem('access_token'),
          type: 'event_type_get3'
        }
      }
    },
    created() {
      this.searchDialogShow = true
    },
    mounted() {
      this.levelselect()
    },
    methods: {
      // change测试
      changeTest() {
        if (this.searchForm.starttime !== null && this.searchForm.endtime !== null) {
          if (this.searchForm.starttime !== '' && this.searchForm.endtime !== '') {
            this.timeBtn = false
          }
        } else {
          this.timeBtn = true
        }
        console.log(this.searchForm.starttime)
        console.log(this.searchForm.endtime)
      },
      // 警告
      //      alertMassage() {
      //        if ((this.submitdata.data.condition.begin_time === this.model.starttime && this.submitdata.data.condition.begin_time !== '') || (this.submitdata.data.condition.end_time === this.model.endtime && this.submitdata.data.condition.end_time !== '')) {
      //          this.queryData()
      //        } else {
      //          this.$message({
      //            type: 'info',
      //            message: '请选择查询时间段，时间是查询的必须条件'
      //          })
      //        }
      //      },
      // 子组件传值
      handleClose() {
        const dialogShow = this.dialogBack // 所需要传的值
        this.$emit('giveFalse', dialogShow) // 传值的参数
      },
      confirmSearch() {
        BUS.$emit('search', this.searchForm)
        this.handleClose()
      },
      // 以下为获取数据方法
      // 获取工作级别
      levelselect() {
        axios.post('/project', this.levelselectTable, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.levelOptions = res.data.datas
          console.log(res)
          console.log(this.options)
        })
          .catch((error) => {
            console.log(error)
          })
      }
    }
  }
</script>

<style scoped>
  /*****************第一层弹窗*****************/
  .clearFix:after{
    display: block;
    content: '';
    clear: both;
  }
  /deep/ .box > .el-dialog{
    width: 0;
    min-width: 540px !important;
    min-height: 194px;
    margin-top: 38vh !important;
    border-radius: 4px;
  }
  /deep/ .longWidth > .el-dialog{
    width: 0;
    min-width: 1050px !important;
    min-height: 340px;
    margin-top: 26vh !important;
    border-radius: 4px;
  }
  /deep/ .el-dialog__footer{
    padding: 0 10px 10px 0;
    padding-top: 0;
  }
  /*****************输入框*****************/
  .typeInput{
    width: 425px;
    height: 25px;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
    text-indent: 10px;
  }
  .disableInput{
    border: none;
    background-color: #fff;
  }
  input::-webkit-input-placeholder{
    color: #C0C4CC;
  }
  /*****************第一层弹窗头部*****************/
  /deep/ .box > .el-dialog > .el-dialog__header{
    min-width: 540px;
    height: 39px;
    line-height: 43px;
    padding: 0;
    text-indent: 20px;
    font-weight: bolder;
    border-radius: 4px 4px 0 0;
    background-color: #e3e6ee;
  }
  /deep/ .box > .el-dialog > .el-dialog__header > .el-dialog__headerbtn{
    top: 12px;
  }
  /deep/ .box > .el-dialog > .el-dialog__header > .el-dialog__headerbtn > i{
    font-size: 18px;
    font-weight: bolder;
  }
  /*****************第一层弹窗内容*****************/
  /deep/ .box > .el-dialog > .el-dialog__body{
    padding: 0 0 0 10px ;
    margin-top: 15px;
  }
  /deep/ .box > .el-dialog > .el-dialog__body > .el-form > .el-form-item{
    margin-bottom: 0px;
  }
  /deep/ .box > .el-dialog > .el-dialog__body > .el-form > .el-form-item > .el-form-item__label{
    color: #69727E;
    padding: 0;
    font-weight: normal;
  }
  /deep/ .box > .el-dialog > .el-dialog__body > .el-form > .el-form-item > .el-form-item__content > .el-input > .el-input__inner{
    width: 240px;
    height: 30px;
    padding: 0 5px;
  }
  /deep/ .box > .el-dialog > .el-dialog__body > .el-form > .borderNone > .el-form-item__content > .el-input > .el-input__inner{
    border: none;
  }
  /*****************第一层弹窗底部*****************/
  /deep/ .box > .el-dialog > .el-dialog__footer{
    border-top: 1px solid #e3e6ee;
  }
  /*****************底部按钮*****************/
  /deep/ .dialog-footer{
    padding-top: 8px;
  }
  .footerLeft{
    padding-left: 10px;
    float: left;
  }
  .footerLeft > button{
    position: relative;
    left: -10px;
    top: -1px;
    height: 24px;
    border-radius: 4px;
    background-color: #47af41;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    border: none;
  }
  .footerLeft > span{
    margin-left: -10px;
    font-size: 12px;
    color: #47af41;
  }
  .footerRightBtn{
    float: right;
  }
  /deep/ .dialog-footer > .footerRightBtn > .el-button{
    width: 80px;
    height: 30px;
    padding: 0;
  }
  /deep/ .dialog-footer > .footerRightBtn > .el-tooltip > .el-button{
    width: 80px;
    height: 30px;
    padding: 0;
    margin-right: 10px;
  }
  /******************切换查询模式*****************/
  .SearchDropDown {
    padding-bottom: 18px;
  }
  /deep/ .el-dropdown {
    background-color: #0072F3;
    color: #fff;
    border-radius: 4px;
  }
  /deep/ .el-dropdown > .el-dropdown-link{
    padding: 0 5px;
  }
  /****************输入框input样式****************/
  .el-row {
    padding-bottom: 6px;
  }
  /deep/ .LongSelectInput > .el-input > .el-input__inner {
    width: 428px;
    height: 24px;
    padding: 0 6px;
  }
  /***日期Input***/
  /deep/ .el-input__prefix .el-range-separator{
    height: 24px;
    line-height: 24px;
  }
  /deep/ .el-input__prefix .el-input__icon{
    line-height: 24px;
  }
  /deep/ .el-input__suffix-inner .el-input__icon{
    line-height: 24px;
  }
  /deep/ .el-input__prefix .el-range__close-icon{
    line-height: 24px;
  }
  /deep/ .el-date-editor > .el-input__inner{
    height: 24px;
    width: 428px;
    line-height: 24px;
  }
  /deep/ .el-date-editor.el-input {
    width: 430px;
  }
</style>
